<!-- vip特权首页 -->
<template>
    <div class="guide">
        <div class="container">
            <div v-if="!isVip" class="flex header-container">
                <img class="user-picture" :src="`${userInfo.user_picture}?x-oss-process=image/resize,m_fill,h_150,w_150`"/>
                <div class="flex flex-v">
                    <span>{{ userInfo.nick_name }}</span>
                    <span class="desc">
                        开通VIP会员，即
                        <span class="yellow">享尊贵特权</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div v-if="isVip" :class="[roleType ? 'person-vip-card-bg' : 'company-vip-card-bg', 'card-bg']">
                <div class="flex flex-align-center content">
                    <img class="user-picture" :src="userInfo.user_picture" />
                    <div class="flex flex-v">
                        <span class="user-name">hi~！{{ userInfo.nick_name }}</span>
                        <span>{{ expire_time }}到期</span>
                    </div>
                </div>
                <div class="btn" @click="purchase">会员续费</div>
            </div>
            <div v-else :class="[roleType ? 'person-un-vip-card-bg' : 'company-un-vip-card-bg', 'card-bg']">
                <div class="price">
                    <span class="symbol">￥</span>
                    <span class="num">{{ roleType ? personPrice : companyPrice }}</span>
                    <span class="unit">/年</span>
                </div>
            </div>
        </div>
        <div v-if="isVip && roleType" class="desc-container flex flex-v flex-align-center" :class="{usevipd:isVip && roleType}" :data-role="roleType">
            <img class="title-vip-img" v-if="roleType" :src="imgUrl + 'vip/person-vip-title.png'" />
            <img class="title-vip-img" v-else :src="imgUrl + 'vip/company-vip-title.png'" />
            <div class="flex">
                <div class="desc-vip-img" style="margin-right: 20px">
                    <img @click="jumpToInviteAwardPage" :src="imgUrl + 'vip/person-vip-invite.png'" />
                </div>
                <div class="desc-vip-img">
                    <img @click="jumpToInviteAwardPage" :src="imgUrl + 'vip/company-vip-invite.png'" />
                </div>
            </div>
        </div>
        <div v-if="isVip && !roleType" class="desc-container flex flex-v flex-align-center" :class="{usevipd:isVip && !roleType}" :data-role="roleType">
            <img class="title-vip-img" v-if="roleType" :src="imgUrl + 'vip/person-vip-title.png'" />
            <img class="title-vip-img" v-else :src="imgUrl + 'vip/company-vip-title.png'" />
            <div class="flex">
                <div class="desc-vip-img" style="margin-right: 20px">
                    <img @click="jumpToInviteAwardPage" :src="imgUrl + 'vip/person-vip-invite.png'" />
                </div>
                <div class="desc-vip-img">
                    <img @click="jumpToInviteAwardPage" :src="imgUrl + 'vip/company-vip-invite.png'" />
                </div>
            </div>
        </div>
        <div v-if="!isVip" class="desc-container flex flex-v flex-align-center not_vip">
            <img class="title-img" v-if="roleType" :src="imgUrl + 'vip/person-title.png'" />
            <img class="title-img" v-else :src="imgUrl + 'vip/company-title.png'" />
            <img class="desc-img" v-if="roleType" :src="constant.oemObj.vipBgUrlPerson" />
            <img class="desc-img" v-else :src="constant.oemObj.vipBgUrlCompany" />
            <span @click="jumpToAllRightsPage">查看全部权益 ></span>
        </div>
        <div class="goods-container flex flex-v flex-align-center" v-if="false">
            <div v-if="isVip">
                <img class="title-vip-img" v-if="roleType" :src="imgUrl + 'vip/person-vip-goods-title.png'" />
                <img class="title-vip-img" v-else :src="imgUrl + 'vip/company-vip-goods-title.png'" />
            </div>
            <div v-else>
                <img class="title-img" v-if="roleType" :src="imgUrl + 'vip/person-vip-goods-title.png'" />
                <img class="title-img" v-else :src="imgUrl + 'vip/company-shop-title.png'" />
            </div>
            <div class="goods-items flex">
                <div class="goods-item" style="margin-right: 20px;">
                    <div class="price">新人价: ¥0.01</div>
                    <div class="flex flex-v flex-align-center">
                        <img :src="imgUrl + 'vip/goods.png'" />
                        <span class="goods-name">澳斯曼卫浴 AS1257</span>
                    </div>
                </div>
                <div class="goods-item">
                    <div class="price">新人价: ¥0.01</div>
                    <div class="flex flex-v flex-align-center">
                        <img :src="imgUrl + 'vip/goods.png'" />
                        <span class="goods-name">澳斯曼卫浴 AS1257</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="isVip" class="other-container flex flex-v flex-align-center">
            <img v-if="roleType" :src="imgUrl + 'vip/person-vip-other-title.png'" class="title-img" />
            <img v-else :src="imgUrl + 'vip/company-vip-other-title.png'" class="title-img" />
            <img class="desc-img" v-if="roleType" :src="imgUrl + 'vip/person-vip-desc.png'" />
            <img class="desc-img" v-else :src="imgUrl + 'vip/company-vip-desc.png'" />
            <span @click="jumpToAllRightsPage">查看全部权益 ></span>
        </div>
        <div v-if="!isVip" class="invite-container flex flex-v flex-align-center">
            <div :class="[roleType ? 'person' : 'company', 'bg' ]" @click="jumpToInviteAwardPage" />
        </div>
        <div v-if="!isVip" class="scroll-container flex flex-v flex-align-center">

            <!-- TODO 滚动轮播 -->

            <!-- <vueSeamless :data="scroll_data" :class-option="scroll_option" class="prompt_scroll_wrap"> -->
                <scroll-view scroll-y>
                    <swiper class="swiper" autoplay circular vertical :interval="3000">
                        <swiper-item v-for="(item, index) in scroll_data" :key="index">
                            <div class="content flex flex-align-center">
                                <img :src="item.picture" />
                                <span>{{ item.hour }}小时</span>
                                <span>{{ item.mobile|formatMobile }}</span>
                                <span>{{ item.reason }}</span>
                            </div>
                        </swiper-item>
                    </swiper>
                </scroll-view>
                <!-- <div class="content flex flex-align-center" v-for="(item, index) in scroll_data" :key="index">
                    <img :src="item.picture" />
                    <span>{{ item.hour }}小时</span>
                    <span>{{ item.mobile|formatMobile }}</span>
                    <span>{{ item.reason }}</span>
                </div> -->
            <!-- </vueSeamless> -->
        </div>
        <div v-if="!isVip" class="btn-container flex">
            <div class="price">
                <span>￥{{ roleType ? personPrice : companyPrice }}</span>
                <!-- <span class="box u-tri">已抵用¥3000.00</span> -->
            </div>
            <div class="vip_btn_warp">
                 <span @click="purchase" class="vip_purchase">立即开通</span>
                <!-- img :src="imgUrl + 'vip/btn.png'" @click="purchase" />-->
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { isPersonRoleType, getFormatDate } from '@/utils/common'
import { getvippay } from '@/api/payment'
import { getvip } from '@/api/vip'
import { getUser } from '@/utils/auth'
import qs from 'qs'

export default {
	name: 'VipGuide',
	data() {
		return {
			title: '会员特权',
			expire_time: '',
			vipInfo: '',
			constant: this.$constant,
			imgUrl: this.$constant.imgUrl,
			scroll_data: [
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '18039834849',
					reason: '开通会员'
				},
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '18039834849',
					reason: '开通会员'
				},
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '18039834849',
					reason: '开通会员'
				},
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '151****1234',
					reason: '开通会员'
				}
			]
			// ,
			// scroll_option: {
			// 	step: 1,
			// 	limitMoveNum: 1,
			// 	openTouch: false,
			// 	waitTime: 100,
			// 	direction: 1,
			// 	hoverStop: true,
			// 	isSingleRemUnit: true,
			// 	switchDelay: 1000,
			// 	singleWidth: 2
			// }
		}
	},
	filters: {
		formatMobile(mobile) {
			return `${mobile.substr(0, 3)}****${mobile.substr(7)}`
		}
	},

	computed: {
		...mapGetters({ 'userInfo': 'getUser' }),
		...mapGetters(['allConfig']),
		roleType() {
			return isPersonRoleType(this.userInfo.role_id)
		},
		isVip() {
			return this.userInfo.vip_level > 0
		},
		companyPrice() {
			return this.allConfig.config ? this.allConfig.config.hkds_vip_price_config.company.price : 0
		},
		personPrice() {
			return this.allConfig.config ? this.allConfig.config.hkds_vip_price_config.personal.price : 0
		}

	},

	onLoad() {
		this.getvipmsg()
		getUser(true)
	},

	methods: {
		getvipmsg() {
			getvip().then(res => {
				const data = res.data
				this.expire_time = data.vipInfo && getFormatDate(data.vipInfo.expire_time, 'yyyy-MM-dd')
				this.vipInfo = data.vipInfo
			})
		},
		// 跳转到查看全部权益页
		jumpToAllRightsPage() {
			uni.navigateTo({
				url: `/pages/admin/vip/allRight`
			})
		},
		// 跳转到邀请开通vip会员页
		jumpToInviteAwardPage() {
			// this.$router.push({
			// 	name: 'InviteAward',
			// 	query: {
			// 		owner_user_id: this.owner_user_id
			// 	}
			// })
		},
		purchase() {
			const params = {
				roleType: this.roleType ? 1 : 0,
				isVip: this.isVip
			}
			uni.navigateTo({
				url: `/pages/admin/vip/purchaseVip?${qs.stringify(params)}`
			})
		}
	}
}
</script>
<style lang='scss' scoped>
@import '~@/uni.scss';
scroll-view {
    height: 50px;
}
.swiper{
    width: 398px;
    height: 50px;
    margin: 0 auto;
    swiper-item {
        height: 100%;
    }
}
.guide {
    width: 100%;
    background: #fff;
    padding-bottom: 120px;
    .container {
        background: #ffffff;
        background-image: url($imgUrl + 'vip/guide-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 327px;
        position: absolute;
        .header-container {
            padding-top: 40px;
            .user-picture {
                width: 94px;
                height: 94px;
                border-radius: 50%;
                margin: 0 40px;
            }
            span {
                color: #ffffff;
                font-size: 30px;
                line-height: 24px;
                margin-top: 10px;
            }
            .desc {
                margin-top: 20px;
                color: #999999;
                font-size: 24px;
                line-height: 24px;
                .yellow {
                    color:  #d8bd85;
                    font-size: 24px;
                }
            }
        }
    }
    .card-container {
        width: 100%;
        background: #ffffff;
        .card-bg {
            position: relative;
            z-index: 9;
            width: 670px;
            height: 341px;
            .price {
                display: flex;
                align-items: center;
                position: absolute;
                left: 30px;
                bottom: 74px;
                color: #252525;
                span {
                    margin: 0 !important;
                }
                .symbol {
                    font-size: 30px;
                }
                .num {
                    font-size: 40px;
                }
                .unit {
                    font-size: 24px;
                }
            }
            .content {
                padding: 63px 30px;
            }
            span {
                color: #333333;
                font-size: 24px;
                line-height: 24px;
                margin: 10px 0;
            }
            .user-name {
                font-size: 30px;
                color: #333333;
                line-height: 35px;
                display: -webkit-box;
                word-break: break-all;
                -webkit-line-clamp: 1;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .btn {
                width: 180px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #333333;
                text-align: center;
                line-height: 60px;
                color: #333333;
                font-size: 24px;
                margin: 0 0 29px 45px;
            }
        }
        .user-picture {
            width: 94px;
            height: 94px;
            border-radius: 50%;
            margin: 0 28px 0 20px;
        }
        .person-vip-card-bg {
            /*margin: 69px auto 0 auto;*/
            top: 70px;
            margin: 0 auto;
            background-image: url($imgUrl + 'vip/person-vip.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .company-vip-card-bg {
            margin: 0 auto;
            top: 70px;
            background-image: url($imgUrl + 'vip/company-vip.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .person-un-vip-card-bg {
            // margin: 155px auto 0 auto;
            top: 140px;
            margin: 0 auto;
            background-image: url($imgUrl + 'vip/person-un-vip.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .company-un-vip-card-bg {
            /* margin: 155px auto 0 auto;*/
            top: 150px;
            margin: 0 auto;
            background-image: url($imgUrl + 'vip/company-un-vip.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }
    .usevip {
        margin-top: 120px;
    }
    .usevipd {
        margin-top: 50px;
    }
    .desc-container {
        background: #ffffff;
        padding: 29px;
        &.not_vip {
            padding-top: 180px;
        }
        .title-vip-img {
            width: 329px;
            height: 44px;
            padding-bottom: 29px;
        }
        .desc-vip-img {
            width: 325px;
            height: 148px;
            box-shadow: #c2c2c2 0px 1px 20px 0px;
            border-radius: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .title-img {
            width: 467px;
            height: 47px;
        }
        .desc-img {
            margin-top: 38px;
            width: 668px;
            height: 821px;
        }
        span {
            color: #ff6900;
            font-size: 28px;
            line-height: 35px;
            margin-top: 48px;
        }
    }
    .goods-container {
        margin: 20px 0;
        background: #ffffff;
        padding: 29px;
        .title-vip-img {
            width: 411px;
            height: 45px;
        }
        .title-img {
            width: 508px;
            height: 51px;
        }
        .goods-items {
            .goods-item {
                background: #ffffff;
                margin-top: 43px;
                width: 325px;
                height: 403px;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: #c2c2c2 0px 1px 20px 0px;
                img {
                    width: 285px;
                    height: 285px;
                    border: none;
                }
                .goods-name {
                    color: #333333;
                    font-size: 26px;
                    line-height: 24px;
                    word-spacing: 0.5px;
                    margin: 20px 0 33px;
                }
                .price {
                    width:50%;
                    height: 40px;
                    background: linear-gradient(to right, #ff6744, #eb285a);
                    border-top-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 24px;
                    color: #ffffff;
                    word-spacing: 0.5px;
                }
            }
        }
    }
    .invite-container {
        background: #ffffff;
        width: 100%;
        height: 287px;
        padding-top: 32px;
        .bg {
            width: 708px;
        }
        .person {
            background-image: url($imgUrl + 'vip/person-invite-bg.png');
            background-size: 100% 100%;
            height: 247px;
        }
        .company {
            background-image: url($imgUrl + 'vip/company-invite-bg.png');
            background-size: 100% 100%;
            height: 260px;
        }
    }
    .scroll-container {
        background: #ffffff;
        width: 100%;
        height: 50px;
        .prompt_scroll_wrap {
            width: 398px;
            height: 50px;
            border-radius: 25px;
            filter: alpha(opacity=90);
            -moz-opacity: 0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            color: #ffffff;
            line-height: 50px;
        }
        .content {
            background: #000000;
            width: 398px;
            height: 50px;
            border-radius: 25px;
            color: #ffffff;
            line-height: 50px;
            img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                margin: 0 6px;
            }
            span {
                margin-right: 9px;
            }
        }
    }
    .btn-container {
        background: #ffffff;
        // padding-top: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        .price {
            text-align: left;
            padding-left: 20px;
            width: calc(100% - 300px);
            height: 100px;
            line-height: 100px;
            background-color: #333333;
            box-shadow: #c2c2c2 0px -1px 10px 0px;
            font-size: 36px;
            word-spacing: 0.7px;
            color: #ffffff;
        }
        .box {
            margin-left: 20px;
            position: relative;
            display: inline-block;
            width: 219px;
            height: 45px;
            background: linear-gradient(to right, #ff6744, #eb285a);
            line-height: 45px;
            font-size: 24px;
            text-align: center;
            border: none;
        }
        .u-tri:before {
            position: absolute;
            left: -24px;
            top: 14px;
            content: '';
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid transparent;
            border-right: 12px solid #ff6744;
        }
        .vip_btn_warp {
            width:300px;
            height: 100px;
            background-color: #d8bd85;
            text-align: center;
            padding-left: 25px;
            line-height:100px;
            font-size: 36px;
            color: #333333;
            font-weight:700px;
            word-spacing: 0.5px;
            }
            .vip_purchase {

        }
    }
    .other-container {
        background: #ffffff;
        margin-top: 20px;
        padding: 40px 0;
        .title-img {
            width: 330px;
            height: 45px;
        }
        .desc-img {
            margin-top: 38px;
            width: 668px;
            height: 821px;
        }
        span {
            color: #ff6900;
            font-size: 28px;
            line-height: 35px;
            margin-top: 48px;
        }
    }
}
</style>
